<template>
  <div class="SnakePlatform">
    <!-- 蛇 -->
    <div>
      <!-- 蛇头 -->
      <div class="SnakeHead" :style="{left:SnakeStyle.left+'px',top:SnakeStyle.top+'px'}"><div></div><div></div></div>
      <div class="SnakeBody"
      v-html="itme.str"
      v-for="itme in Snakebody"
      :key="itme.index"
      :style="{left:itme.left+'px',top:itme.top+'px'}"
      :class="itme.class"
      ></div>
    </div>
    <!-- 食物 -->
    <Food></Food>

  </div>
</template>

<script setup lang="ts">
import Food from "./Food.vue";
import {SnakeStyle,Snakebody} from '../hoos/UseSnakeMovement'
import { inject } from "@vue/runtime-core";
</script>

<style scoped>
*{
  padding: 0px;
  margin: 0px;
  /* 改变盒子模型的计算方式 */
  box-sizing: border-box;
}
.SnakePlatform{
  position: relative;
  width: 520px;
  /* height: 350px; */
  /* flex: 2.941; */
  flex: 3.077;
  border: 5px solid #458c06;
}

.SnakeHead{
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #ff6556;
  background: #cf5548;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.SnakeHead div{
  width: 6px;
  height: 6px;
  background: url(../assets/eye.jpg) no-repeat 100%;
  border-radius: 50%;
}
.SnakeBody{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #ff6556;
  background: #cf5548;
}
.NoShow{
  display: none;
}
</style>
